<template>
    <div class="individual">
<!--        个人信息页面-->
        <div class="left" style="margin-bottom: 60px;">
            <p class="guan">关于我</p>
            <div class="xx">
                <div class="user i">
                    <img src="@/assets/img/admin.gif" alt="">
                </div>
                <div class="i">
                    <p class="user-name text-center">{{user.userName}}</p>
                    <p class="user-role text-center">{{user.realName}}</p>
                </div>
            </div>
            <div class="jian">
                <p class="gr"><i class="el-icon-s-management"></i><span>个人简介</span></p>
                <p class="contents">无</p>
            </div>
        </div>
        <div class="right">
            <div class="el-card__body">
                <div class="el-tabs__header is-top">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="时间线" name="first">
                            <div class="block">
                                <el-timeline>
                                    <el-timeline-item :timestamp="user.lastActiveTime" placement="top">
                                        <el-card>
                                            <h4 style="margin:18px 0">最后活动时间</h4>
                                            <p style="margin:10px 0">管理员在校考系统中最后活动了</p>
                                        </el-card>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="user.birthDay" placement="top">
                                        <el-card>
                                            <h4 style="margin:18px 0">加入时间</h4>
                                            <p style="margin:10px 0">管理员加入了校考系统</p>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="账号" name="second">
                            <el-form  label-width="100px" class="demo-ruleForm">
                                <el-form-item prop="name">
                                    <template>
                                        <div style="font-weight:700">
                                            真实姓名
                                        </div>
                                    </template>
                                    <el-input v-model="user.realName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="tel">
                                    <template>
                                        <div style="font-weight:700">
                                            手机号
                                        </div>
                                    </template>
                                    <el-input v-model="user.phone" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-button type="primary" @click="update">更新</el-button>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: 'second',
                user:[]

            };
        },
        mounted() {
            //用户信息
            this.axios({
                url:"/api/admin/user/current",
                method:"post",
            }).then(res=>{
                if(res.data.code == 1){
                    this.user = res.data.response
                }
            })
        },
        methods: {
            update(){
                //更新
                let obj = {
                    "id":this.user.id,  //用户id
                    "userUuid": this.user.userUuid, //用户标识
                    "userName":this.user.userName, //用户名
                    "realName":this.user.realName, //真实姓名
                    "age":this.user.age, //年龄
                    "role":this.user.role, //角色
                    "sex":this.user.sex,  //性别
                    "birthDay":this.user.birthDay, //生日
                    "phone":this.user.phone, //手机号
                    "lastActiveTime":this.user.lastActiveTime, //最后活动时间
                    "createTime": this.user.createTime, //创建时间
                    "modifyTime":this.user.modifyTime, //修改时间
                    "status":this.user.status, //状态
                    "userLevel": this.user.userLevel, //年级
                    "imagePath":this.user.imagePath//头像
                }
                this.axios({
                    url:"/api/admin/user/update",
                    method:"post",
                    data:obj,
                }).then(res=>{
                    if(res.data.code==1){
                        this.$message({
                            message: '成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('失败');
                    }
                })
                //修改
                this.axios({
                    url:"/api/admin/user/selectByUserName",
                    method:"post",
                    data:this.user.realName
                }).then(res=>{
                    console.log(res)
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .individual{
        display:flex;
        .left{
            margin-left:10px;
            margin-right:10px;
            width:25%;
            border-radius: 4px;
            border: 1px solid #e6ebf5;
            background-color: #fff;
            overflow: hidden;
            color: #303133;
            .guan{
                padding: 18px 20px;
                border-bottom: 1px solid #e6ebf5;
                box-sizing: border-box;
            }
            .xx{
                padding: 20px;
                .i{
                    padding-top: 10px;
                    margin: 0 auto;
                    display: table;
                    img{
                        width:100px;
                        height:100px;
                        background:greenyellow;
                        border-radius:50%;
                    }
                    .user-name{
                        padding-top: 10px;
                        font-weight:700;
                    }
                    .user-role{
                        padding-top: 10px;
                        font-weight:400;
                        font-size:14px;
                    }
                    .text-center{

                        text-align: center;
                    }
                }
            }
            .jian{
                color: rgb(96, 98, 102);
                font-size: 14px;
                padding:0 20px 20px 20px;
                .gr{
                    border-bottom: 1px solid rgb(223, 230, 236);
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                    font-weight: 700;
                    span{
                        padding-left:4px;
                    }
                }
            }
        }
        .right{
            border:1px solid #e6ebf5;
            padding-left: 10px;
            padding-right: 10px;
            margin-right:10px;
            width: 75%;
            .el-card__body{
                padding: 20px;
            }
        }
    }
    ::v-deep .el-form-item__content{
        margin-left:0 !important;
    }
</style>